<!--
 * @FileDescription 协议解读
 * @Author 杨宇翔
 * @Date 20220610 13:58:47
 * @LastEditors 杨宇翔
 * @LastEditTime 20220610 13:58:47
-->
<template>
    <div class="protocol-data-list">
        <div class="header">
            <span>协议</span>
            <div class="type-container">
                <input type="radio" name="协议解析数据来源" id="设备数据" hidden value="Device"
                    v-model="ProtocolComponent.Default.DataSource.value">
                <label for="设备数据">
                    设备数据
                </label>
                <input type="radio" name="协议解析数据来源" id="历史数据" hidden value="Simulate"
                    v-model="ProtocolComponent.Default.DataSource.value">
                <label for="历史数据">
                    历史数据
                </label>
            </div>
        </div>
        <div class="data-list">
            <table>
                <thead>
                    <th>帧ID</th>
                    <th>数据</th>
                </thead>
                <tbody>
                    <tr v-for="(data, index) of ProtocolComponent.Default.Datas" :key="index"
                        @click="ProtocolComponent.Default.Resolve(data)">
                        <td>{{  ProtocolComponent.Default.FrameIndex + index  }}</td>
                        <td>{{  Calculate(data)  }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ProtocolComponent } from './InertialNavigationComponent';

function Calculate(data: Uint8Array): string {
    return Array.from(data).map(byte => byte.toString(16).toUpperCase().padStart(2, '0')).join(' ');
}
</script>

<style scoped>
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-thumb {
    background: rgba(129, 133, 156, 0.5);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 133, 156, 1);
}

::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    background-color: rgba(129, 133, 156, 0.1);
}

.protocol-data-list {
    padding-top: 4rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

    padding: 0 6rem;
}

.header>span:first-of-type {
    color: #B1B1D4;
    font-size: 3.6rem;
    font-weight: 600;
}

.header>span:last-of-type {
    color: #81859C;
    font-size: 1.6rem;
    line-height: 3.6rem;
}

.dropdown {
    width: 14rem;
}

.type-container {
    width: 22.4rem;
    height: 4rem;

    display: flex;
    justify-content: stretch;
    align-items: stretch;

    border-radius: 0.6rem;
    border: 0.1rem solid #36384B;
}

.type-container>label {
    flex-grow: 1;
    border-radius: 0.6rem;

    color: #81859C;
    font-size: 1.8rem;
    text-align: center;
    line-height: 4rem;
}

.type-container>label:hover {
    color: white;
}

.type-container>input:checked+label {
    color: white;
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);
}

.data-list {
    margin-bottom: 3rem;
    overflow: overlay;
}

table {
    width: 100%;
}

thead {
    height: 4rem;

    position: sticky;
    top: 0;

    background-color: #131620;
}

thead::after {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 0.1rem;

    background-color: #81859C1A;
}

th {
    color: #81859C;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

th:last-of-type {
    width: 80%;
}

tr {
    line-height: 2rem;
}

td {
    padding: 1rem 0;

    color: #B1B1D4;
    font-size: 1.6rem;
    text-align: center;
    line-height: 2rem;
}

td:last-of-type {
    padding: 1rem;
    text-align: left;
}
</style>